<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>人事管理系统</title>
    <base th:href="${#httpServletRequest.getContextPath()} + '/'">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <!-- 引入 layui.js -->
    <script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="font-weight: bold;font-style: italic;font-size: 20px;color: #00FF00"><i
                class="layui-icon layui-icon-template" style="font-size: 20px;color: #00FF00"></i><a
                href="javascript:reload()" style="color: #00FF00">教务管理系统</a>
        </div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" style="padding-right: 0">
            <li class="layui-nav-item"><a href=""><i class="layui-icon layui-icon-time"> </i><span id="time"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    [[${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}]]
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:information();">个人信息</a></dd>
                    <dd><a href="javascript:bind()">绑定身份</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="/do/logout"><i class="layui-icon layui-icon-logout"
                                        style="font-size: 20px;font-weight: bold;color: red"></i>&nbsp;&nbsp;退出</a>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftNav">
                <li style="text-align: center"><img
                        src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                        class="layui-nav-img" style="height: 120px;width: 120px;margin:10px 0 10px 0"
                        alt="">
                    <p style="text-align: center;font-size: 20px">
                        欢迎，[[${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}]]</p>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-username" style="font-size: 20px"></i>&nbsp;&nbsp;学生管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="学生信息" lay-href="/student/list.html"><a id="checkStudents">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;学生信息</a></dd>
                        <dd data-type="tabAdd" lay-id="添加学生" lay-href="/student/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加学生</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-friends" style="font-size: 20px"></i>&nbsp;&nbsp;教师管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="教师信息" lay-href="/teacher/list.html"><a id="checkTeachers">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;教师信息</a></dd>
                        <dd data-type="tabAdd" lay-id="添加教师" lay-href="/teacher/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加教师</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-group" style="font-size: 16px"></i>&nbsp;&nbsp;院系管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="院系信息" lay-href="/department/list.html"><a id="checkDepartments">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;院系信息</a></dd>
                        <dd data-type="tabAdd" lay-id="添加院系" lay-href="/department/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加院系</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-file" style="font-size: 20px"></i>&nbsp;&nbsp;课程管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="课程信息" lay-href="/course/list.html"><a id="checkCourses">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;课程信息</a></dd>
                        <dd data-type="tabAdd" lay-id="添加课程" lay-href="/course/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加课程</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-chart-screen" style="font-size: 20px"></i>&nbsp;&nbsp;授课管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="授课信息" lay-href="/lecture/list.html"><a id="checkLectures">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;授课信息</a></dd>
                        <dd data-type="tabAdd" lay-id="添加授课" lay-href="/lecture/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加授课</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a><i class="layui-icon layui-icon-star" style="font-size: 20px"></i>&nbsp;&nbsp;用户管理</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="用户信息" lay-href="/user/list.html"><a id="checkUsers">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-search"
                                style="font-size: 20px"></i>&nbsp;&nbsp;用户信息</a></dd>
                        <dd data-type="tabAdd" lay-id="添加用户" lay-href="/user/add/page.html"><a>&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-addition"
                                style="font-size: 20px"></i>&nbsp;&nbsp;添加用户</a>
                        </dd>
                    </dl>
                </li>
                <!-- 隐藏部分 -->
                <li class="layui-nav-item" style="display: none">
                    <a><i class="layui-icon layui-icon-speaker" style="font-size: 20px"></i>&nbsp;&nbsp;</a>
                    <dl class="layui-nav-child">
                        <dd data-type="tabAdd" lay-id="录入成绩" lay-href="/lecture/course/results/page.html"><a id="inputScore">&nbsp;&nbsp;<i
                                class="layui-icon layui-icon-edit"
                                style="font-size: 17px"></i>&nbsp;&nbsp;录入成绩</a></dd>
                        <dd data-type="tabAdd" lay-id="查看课程"
                            lay-href="/student/course/results/page.html">
                            <a id="checkCourseResults">&nbsp;&nbsp;<i
                                    class="layui-icon layui-icon-layer"
                                    style="font-size: 21px"></i>&nbsp;&nbsp;查看课程</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="layui-tab layui-tab-brief" lay-filter="tabBrief" lay-allowclose="true"
             style="height:89%;width:100%;margin-bottom:0">
            <ul class="layui-tab-title">
                <li class="layui-this">欢迎页面</li>
            </ul>
            <div class="layui-tab-content" style="height:100%;width:97%;padding: 15px">
                <div class="layui-tab-item layui-show">
                    <iframe th:src="@{/welcome.html}" src="welcome.html" style="border: none" height="100%"
                            width="100%"></iframe>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer" style="text-align: center">
        <!-- 底部固定区域 -->
        <p>@2021-@2100 五邑大学 2018级 智能制造学部
        <p>
    </div>
</div>
</body>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        const element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //时间更新
        getTime();
        setInterval(function () {
            getTime();
        }, 1000);

        function getTime() {
            const d = new Date();
            const M = d.getMonth() < 9 ? ('0' + (d.getMonth() + 1)) : (d.getMonth() + 1);
            const D = d.getDate() < 10 ? ('0' + d.getDate()) : d.getDate();
            const h = d.getHours() < 10 ? ('0' + d.getHours()) : d.getHours();
            const m = d.getMinutes() < 10 ? ('0' + d.getMinutes()) : d.getMinutes();
            const s = d.getSeconds() < 10 ? ('0' + d.getSeconds()) : d.getSeconds();
            document.getElementById("time").innerHTML = d.getFullYear() + '年' + M + '月' + D + '日&nbsp;&nbsp;&nbsp;&nbsp;' + h + ':' + m + ':' + s
                + '&nbsp;&nbsp;星期' + '日一二三四五六'.charAt(d.getDay());
        }

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
            }
        });

        //触发事件
        const active = {
            tabAdd: function () {
                // 新增一个Tab项
                element.tabAdd('tabBrief', {
                    title: window.tabName
                    , content: window.iframeContent
                    , id: window.iframeSrc
                });
            }, tabChange: function () {
                element.tabChange('tabBrief', iframeSrc);
            }
        };

        $('#leftNav dd').on('click', function () {
            const othis = $(this);
            let isRepeat = false;
            window.iframeSrc = othis.attr('lay-href'); // 获取iframe的src
            window.tabName = othis.text();
            $(".layui-tab-title li").each(function (k, val) {
                const layId = $(val).attr("lay-id");
                if (layId === window.iframeSrc) {  // 如果已开启
                    $(val).addClass("layui-this").siblings().removeClass("layui-this");
                    active.tabChange();
                    isRepeat = true;
                    return false;
                }
            })
            if (iframeSrc && !isRepeat) {
                window.iframeContent = '<iframe src="' + iframeSrc + '" frameborder="0" height="100%" width="100%"></iframe>'
                active.tabAdd.call(this, othis);
                active.tabChange();
            }
        });
    });
</script>
<script>
    function reload() {
        location.reload(true)
    }

    function bind() {
        layer.open({
            type: 2,
            title: ['绑定信息', 'font-size:25px;font-weight: bolder'],
            area: ['650px', '250px'],
            shadeClose: false,
            content: '/user/bind/page.html'
        });
    }

    function information() {
        layer.open({
            type: 2,
            title: ['修改用户信息', 'font-size:25px;font-weight: bolder'],
            area: ['650px', '350px'],
            shadeClose: false,
            content: '/user/modify/page.html'
        });
    }
</script>
</html>